<template>
	<view>
		<view class="page-body">
			<view class="uni-flex uni-column" style="justify-content: center; align-items: center;">
				<image class="uni-logo" src="http://img.deitui.com/?w=200&h=200&text=Logo&fontsize=36&textclor=fff&bgclor=ed6d53"></image>
			</view>

			<view class="uni-cell">
				<view class="uni-cell__value">
					<input type="password" v-model="currentPassword" placeholder="请输入新密码" v-if="passwordTypes[0] == 'password'" />
					<input type="text" v-model="currentPassword" placeholder="请输入新密码" v-if="passwordTypes[0] == 'text'" />
				</view>
				<view class="uni-icon uni-icon-eye uni-text-gray uni-padding-top-15 uni-padding-bottom-15 " style="font-size: :32upx;"
				 custom-class="uni-cell__right-icon" v-if="passwordTypes[0] == 'text'" @tap="changePasswordType(0)"></view>
				<view class="uni-icon uni-icon-eye-close uni-text-gray  uni-padding-top-15 uni-padding-bottom-15 " style="font-size: :32upx;"
				 custom-class="uni-cell__right-icon" v-if="passwordTypes[0] == 'password'" @tap="changePasswordType(0)"></view>
				<view class="uni-icon uni-icon-close1  uni-padding-top-15 uni-padding-bottom-15" custom-class="van-cell__right-icon"
				 v-if="currentPassword.length > 0" @tap="clearPassword(0)"></view>

			</view>
			<view class="uni-cell">

				<view class="uni-cell__value">
					<input type="password" v-model="confirmPassword" placeholder="请再次确认密码" v-if="passwordTypes[1] == 'password'" />
					<input type="text" v-model="confirmPassword" placeholder="请再次确认密码" v-if="passwordTypes[1] == 'text'" />
				</view>
				<view class="uni-icon uni-icon-eye uni-text-gray uni-padding-top-15 uni-padding-bottom-15 " style="font-size: :32upx;"
				 custom-class="uni-cell__right-icon" v-if="passwordTypes[1] == 'text'" @click="changePasswordType(1)"></view>
				<view class="uni-icon uni-icon-eye-close uni-text-gray uni-padding-top-15 uni-padding-bottom-15 " style="font-size: :32upx;"
				 custom-class="uni-cell__right-icon" v-if="passwordTypes[1] == 'password'" @click="changePasswordType(1)"></view>
				<view class="uni-icon uni-icon-close1 uni-text-gray uni-padding-top-15 uni-padding-bottom-15" custom-class="uni-cell__right-icon"
				 v-if="confirmPassword.length>0" @tap="clearPassword(1)"></view>
			</view>

			<view class="uni-flex uni-row" style="justify-content: space-between;">
				<button class="btn-submit uni-bg-primary" @click="save">提交</button>
				<button type="default" class="btn-reset" @click="reset">重置</button>
			</view>

		</view>
	</view>
</template>
<script>
	import {
		updateUserLogin
	} from '@/api/ucenter/index'
	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				currentPassword: "",
				confirmPassword: "",
				userLoginId: "",
				delta: 1,
				passwordTypes: [
					"password",
					"password"
				]
			}
		},
		onLoad(e) {
			if (e.delta !== undefined)
				this.delta = this.delta + e.delta;
			console.log(this.delta)
			this.userLoginId = e.userLoginId;
			console.log(this.userId)
		},
		computed: {
			...mapGetters(
				["userId"]
			)
		},
		methods: {
			clearPassword(index) {
				console.log(index);

				if (index == 0) {
					this.currentPassword = '';
				} else {
					this.confirmPassword = "";
				}
			},
			changePasswordType(index) {
				console.log(index);
				this.passwordTypes[index] = this.passwordTypes[index] == 'password' ? 'text' : 'password'
			},
			reset() {
				this.confirmPassword = "";
				this.currentPassword = "";
			},

			save() {
				if (this.currentPassword.length < 0) {
					uni.showModal({
						title: "提示",
						content: "请输入密码"
					})
					return;
				}

				if (this.confirmPassword.length < 0) {
					uni.showModal({
						title: "提示",
						content: "请再次确认密码"
					})
					return;
				}

				var that = this;

				uni.showModal({
					title: "提示",
					content: "确认修改密码？",
					success: async function(res) {
						updateUserLogin(that.userId, {
							userLoginId: that.userLoginId,
							currentPassword: that.currentPassword
						}).then(res => {
							if (res.status == 200 && res.rel == true) {
								uni.showModal({
									title: "提示",
									content: "修改成功",
									success: async function(res) {
										if (res.confirm) {
											that.$store.dispatch("LogOut").then(response => {
												setTimeout(() => { //定时器设置每秒递减
													uni.navigateTo({
														url: "/pages/security/login?delta=" + that.delta
													})
												}, 60)
											})
										}
									}

								})
							}
						});
					}
				});
			}
		}
	}
</script>

<style>
	label {
		display: flex;
		flex-direction: row;
		min-width: 270upx;
		margin-right: 20upx;
	}

	.btn-submit {
		color: #ffffff;
	}

	.uni-list-cell {
		justify-content: flex-start;
	}

	.uni-list-cell-db,
	.list-left {
		padding: 0 24upx;
	}

	.btn-reset,
	.btn-submit {
		height: 50upx;
		width: 200upx;
		font-size: 25upx;
	}
</style>
